<template>
  <div class="scroll-board-container">
    <dv-scroll-board :config="config" :items-per-page="10" />
  </div>
</template>

<script setup lang="js">
import { onMounted, reactive } from 'vue';
import axios from 'axios';

const config = reactive({
  header: ['民宿id', '收藏数'],
  data: [],
  columnWidths: [150, 50],
  align: ['center', 'center'],

  rowNum: 12 // 新增的属性，用于控制每页显示的数据行数
});

function getData() {
  axios.get('/minsu-api/queryAllfavname')
    .then((response) => {
      config.data = response.data.data.map(item => ({
        name: item.product_id,
        value1: item.fav_count
      }));
      console.log(config.data);
    })
    .catch((error) => {
      console.error('Failed to fetch data:', error.message);
    });
}

onMounted(() => {
  getData();
});
</script>

<style lang="css">
.scroll-board-container {
  background-color: #100C2A;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
  overflow-x: auto;
}
</style>